---
title: CodeUI
editUrl: https://github.com/toolbeam/openauth/blob/master/packages/openauth/src/ui/code.tsx
description: Reference doc for the `CodeUI`.
---

import { Segment, Section, NestedTitle, InlineSection } from 'toolbeam-docs-theme/components'
import { Tabs, TabItem } from '@astrojs/starlight/components'

<div class="tsdoc">
<Section type="about">
Configure the UI that's used by the Code provider.

```ts {1,7-12}
import { CodeUI } from "@openauthjs/openauth/ui/code"
import { CodeProvider } from "@openauthjs/openauth/provider/code"

export default issuer({
  providers: {
    code: CodeAdapter(
      CodeUI({
        copy: {
          code_info: "We'll send a pin code to your email"
        },
        sendCode: (claims, code) => console.log(claims.email, code)
      })
    )
  },
  // ...
})
```
</Section>
---
## Methods
### CodeUI
<Segment>
<Section type="signature">
```ts
CodeUI(props)
```
</Section>
<Section type="parameters">
#### Parameters
- <p><code class="key">props</code> [<code class="type">CodeUIOptions</code>](#codeuioptions)</p>
Configure the UI.
</Section>
<InlineSection>
**Returns** <code class="type">CodeProviderOptions</code>
</InlineSection>
Creates a UI for the Code provider flow.
</Segment>
## CodeUICopy
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">any</code>
</InlineSection>
</Section>
</Segment>
## CodeUIOptions
<Segment>
<Section type="parameters">
- <p>[<code class="key">copy?</code>](#codeuioptions.copy) <code class="primitive">Object</code></p>
  - <p>[<code class="key">button_continue</code>](#copy.button_continue) <code class="primitive">string</code></p>
  - <p>[<code class="key">code_didnt_get</code>](#copy.code_didnt_get) <code class="primitive">string</code></p>
  - <p>[<code class="key">code_info</code>](#copy.code_info) <code class="primitive">string</code></p>
  - <p>[<code class="key">code_invalid</code>](#copy.code_invalid) <code class="primitive">string</code></p>
  - <p>[<code class="key">code_placeholder</code>](#copy.code_placeholder) <code class="primitive">string</code></p>
  - <p>[<code class="key">code_resend</code>](#copy.code_resend) <code class="primitive">string</code></p>
  - <p>[<code class="key">code_resent</code>](#copy.code_resent) <code class="primitive">string</code></p>
  - <p>[<code class="key">code_sent</code>](#copy.code_sent) <code class="primitive">string</code></p>
  - <p>[<code class="key">email_invalid</code>](#copy.email_invalid) <code class="primitive">string</code></p>
  - <p>[<code class="key">email_placeholder</code>](#copy.email_placeholder) <code class="primitive">string</code></p>
- <p>[<code class="key">mode?</code>](#codeuioptions.mode) <code class="symbol">&ldquo;</code><code class="primitive">email</code><code class="symbol">&rdquo;</code><code class="symbol"> | </code><code class="symbol">&ldquo;</code><code class="primitive">phone</code><code class="symbol">&rdquo;</code></p>
- <p>[<code class="key">sendCode</code>](#codeuioptions.sendcode) <code class="primitive">(claims: <code class="primitive">Record</code><code class="symbol">&lt;</code><code class="primitive">string</code>, <code class="primitive">string</code><code class="symbol">&gt;</code>, code: <code class="primitive">string</code>) => <code class="primitive">Promise</code><code class="symbol">&lt;</code><code class="primitive">void</code><code class="symbol">&gt;</code></code></p>
</Section>
Configure the password UI.
</Segment>
<NestedTitle id="codeuioptions.copy" Tag="h4" parent="CodeUIOptions.">copy?</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">Object</code>
</InlineSection>
</Section>
Custom copy for the UI.
</Segment>
<NestedTitle id="copy.button_continue" Tag="h5" parent="CodeUIOptions.copy.">button_continue</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Continue</code><code class="symbol">&rdquo;</code>
</InlineSection>
Copy for the continue button.
</Segment>
<NestedTitle id="copy.code_didnt_get" Tag="h5" parent="CodeUIOptions.copy.">code_didnt_get</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Didn't get code?</code><code class="symbol">&rdquo;</code>
</InlineSection>
Copy for the link to resend the code.
</Segment>
<NestedTitle id="copy.code_info" Tag="h5" parent="CodeUIOptions.copy.">code_info</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">We'll send a pin code to your email.</code><code class="symbol">&rdquo;</code>
</InlineSection>
Copy informing that the pin code will be emailed.
</Segment>
<NestedTitle id="copy.code_invalid" Tag="h5" parent="CodeUIOptions.copy.">code_invalid</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Invalid code</code><code class="symbol">&rdquo;</code>
</InlineSection>
Error message when the code is invalid.
</Segment>
<NestedTitle id="copy.code_placeholder" Tag="h5" parent="CodeUIOptions.copy.">code_placeholder</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Code</code><code class="symbol">&rdquo;</code>
</InlineSection>
Copy for the pin code input.
</Segment>
<NestedTitle id="copy.code_resend" Tag="h5" parent="CodeUIOptions.copy.">code_resend</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Resend</code><code class="symbol">&rdquo;</code>
</InlineSection>
Copy for the resend button.
</Segment>
<NestedTitle id="copy.code_resent" Tag="h5" parent="CodeUIOptions.copy.">code_resent</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Code resent to </code><code class="symbol">&rdquo;</code>
</InlineSection>
Copy for when the code was resent.
</Segment>
<NestedTitle id="copy.code_sent" Tag="h5" parent="CodeUIOptions.copy.">code_sent</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Code sent to </code><code class="symbol">&rdquo;</code>
</InlineSection>
Copy for when the code was sent.
</Segment>
<NestedTitle id="copy.email_invalid" Tag="h5" parent="CodeUIOptions.copy.">email_invalid</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Email address is not valid</code><code class="symbol">&rdquo;</code>
</InlineSection>
Error message when the email is invalid.
</Segment>
<NestedTitle id="copy.email_placeholder" Tag="h5" parent="CodeUIOptions.copy.">email_placeholder</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Email</code><code class="symbol">&rdquo;</code>
</InlineSection>
Copy for the email input.
</Segment>
<NestedTitle id="codeuioptions.mode" Tag="h4" parent="CodeUIOptions.">mode?</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="symbol">&ldquo;</code><code class="primitive">email</code><code class="symbol">&rdquo;</code><code class="symbol"> | </code><code class="symbol">&ldquo;</code><code class="primitive">phone</code><code class="symbol">&rdquo;</code>
</InlineSection>
</Section>

<InlineSection>
**Default** "email"
</InlineSection>
The mode to use for the input.
</Segment>
<NestedTitle id="codeuioptions.sendcode" Tag="h4" parent="CodeUIOptions.">sendCode</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">(claims: <code class="primitive">Record</code><code class="symbol">&lt;</code><code class="primitive">string</code>, <code class="primitive">string</code><code class="symbol">&gt;</code>, code: <code class="primitive">string</code>) => <code class="primitive">Promise</code><code class="symbol">&lt;</code><code class="primitive">void</code><code class="symbol">&gt;</code></code>
</InlineSection>
</Section>
Callback to send the pin code to the user.

The `claims` object contains the email or phone number of the user. You can send the code
using this.
```ts
async (claims, code) => {
  // Send the code via the claim
}
```
</Segment>
</div>